<template>
	<view class="content" v-show="show">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-cont" style="position: fixed; top: 0; left: 0;z-index: 9;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="@/static/gane/goBack-icon.png"></image>
				</view>
				<view class="flex1 h-100 w-row-center w-wz-conts font-36">代理中心</view>
				<view class="wh-130 w-row-center w-wz-conts p-right-14 disflex" @click="saveOpen()"
					v-if="UserInfo.is_agent">
					<image class="save-icon" src="@/static/mine/add-user.png" mode="widthFix"></image>
					邀请
				</view>
				<view class="wh-130 w-row-center w-wz-conts p-right-14" v-else></view>
			</view>
		</view>
		<view class="bwh-100"></view>
		<!-- 头部导航结束 -->
		<view class="bwh-20"></view>
		<!-- 内容区域 -->

		<view class="w-720 w-bj-cont w-bor-12 w-column-align">
			<!-- <view class="wh-50"></view> -->
			<!-- <view class="w-680 w-column-align">
				<view class="w-150 w-col-center">
					<view class="wh-80 w-bor-100">
						<image class="w-90 h-80" src="../../../static/gane/qd.png"></image>
					</view>
				</view>
				<view class="h-10"></view>
				<view class="w-wz-conts w-row-align">
					佣金余额 <text class="w-wz-gree font-38"> ￥{{tableData.agent_money}}</text>
				</view>
				<view class="h-10"></view>
				<button type="primary" size="mini" @click="submitForm()">佣金转入余额</button>
			</view> -->

			<view class="top_wrap">
				<view class="item">
					<view class="label">总人数</view>
					<view class="val">{{tableData.agent_all_count}}</view>
				</view>
				<view class="item">
					<view class="label">佣金余额</view>
					<view class="val">¥ <text class="num">{{tableData.agent_money}}</text> 元</view>
				</view>
				<view class="item" style="display: flex;align-items: center;justify-content: center;">
					<button type="primary" size="mini" @click="submitForm()">转入钱包</button>
				</view>
			</view>

			<view class="top_wrap">
				<view class="item">
					<view class="label">总输赢</view>
					<view class="val">¥ <text class="num">{{tableData.total_sy}}</text> 元</view>
				</view>
				<view class="item">
					<view class="label">{{date}}总上分</view>
					<view class="val">¥ <text class="num">{{tableData.sanfen}}</text> 元</view>
				</view>
				<view class="item">
					<view class="label">{{date}}总下分</view>
					<view class="val">¥ <text class="num">{{tableData.xiafen}}</text> 元</view>
				</view>
			</view>

			<view class="date_bar">
				<view class="item" :class="{active:grade=='一级'}" @click="list_change('一级', 'grade')">一级</view>
				<view class="item" :class="{active:grade=='二级'}" @click="list_change('二级', 'grade')">二级</view>
				<view class="item" :class="{active:grade=='三级'}" @click="list_change('三级', 'grade')">三级</view>

				<view class="item" @click="dateMore=true">{{date}}
					<image src="@/static/gane/goBack-icon.png"></image>
				</view>
				<view class="more" v-show="dateMore">
					<view class="item2" :class="{active2:date=='今日'}" @click="list_change('今日', 'date')">今日</view>
					<view class="item2" :class="{active2:date=='三天'}" @click="list_change('三天', 'date')">三天</view>
					<view class="item2" :class="{active2:date=='本周'}" @click="list_change('本周', 'date')">本周</view>
					<view class="item2" :class="{active2:date=='本月'}" @click="list_change('本月', 'date')">本月</view>
				</view>
			</view>

			<view class="list">
				<view class="item" v-for="item in list">
					<view class="box1">
						<image class="avatar" :src="item.headimgurl?item.headimgurl:'/static/user.png'"
							mode="aspectFill"></image>
						<view class="nickname" v-if="item.nickname.includes('****')">{{item.phone}}</view>
						<view class="nickname" v-else>{{item.nickname}}</view>
					</view>
					<view class="box2">
						<view class="box2_item">
							<view class="label">{{date}}上分</view>
							<view class="val">￥{{item.sanfen}}</view>
						</view>
						<view class="box2_item">
							<view class="label">{{date}}下分</view>
							<view class="val">￥{{item.xiafen}}</view>
						</view>
						<view class="box2_item">
							<view class="label">{{date}}输赢</view>
              <view class="val" v-if="(item.shuying)>=0"><span v-if="(item.shuying)>0">+</span>￥{{item.shuying}}</view>

              <view class="val" v-if="(item.shuying)<0">-￥{{Math.abs(item.shuying)}}</view>
						</view>
					</view>
					<view class="box3">
						<view class="btn" @click="go_xiazhu(item)">下注记录</view>
					</view>
				</view>
				<view class="empty" v-if="list.length <= 0">
					<image class="wh-150" src="../../../static/gane/zwsj.png"></image>
					<view class="w-wz-conts">暂 无 数 据 </view>
				</view>
			</view>



			<!-- <view class="wh-30"></view>
			<view class="w-700 h-120 w-row-justify-evenly-align">
				<view class="w-300 h-120 w-col-center w-wz-conts font-26"
					@click="RouteIndex('agent_people','day_people')">
					<image class="wh-50" src="../../../static/gane/rt1.png"></image>
					<view class="h-10"></view>
					<text>今日增加<text class="w-wz-red font-36 p-zy6">{{tableData.agent_day_count}}</text>人</text>
				</view>
				<view class="w-2 h-60 w-bj-content"></view>
				<view class="w-330 h-120 w-col-center w-wz-conts font-26"
					@click="RouteIndex('agent_people','all_people')">
					<image class="wh-55" src="../../../static/gane/rt.png"></image>
					<view class="h-10"></view>
					<text>总人数<text class="w-wz-red font-36 p-zy6">{{tableData.agent_all_count}}</text>人</text>
				</view>
			</view>
			<view class="wh-20"></view>
			<view class="w-600 h-1 w-bj-content"></view>
			<view class="wh-20"></view>
			<view class="w-700 h-120 w-row-justify-evenly-align">
				<view class="w-300 h-120 w-col-center w-wz-conts font-26"
					@click="RouteIndex('agent_money','day_amoney')">
					<image class="wh-45" src="../../../static/gane/yj1.png"></image>
					<view class="h-14"></view>
					<text>今日佣金<text class="w-wz-red font-36 p-zy6">{{tableData.agent_day_amoney}}</text>元</text>
				</view>
				<view class="w-2 h-60 w-bj-content"></view>
				<view class="w-330 h-120 w-col-center w-wz-conts font-26"
					@click="RouteIndex('agent_money','all_amoney')">
					<image class="wh-50" src="../../../static/gane/yj.png"></image>
					<view class="h-10"></view>
					<text>总佣金<text class="w-wz-red font-36 p-zy6">{{tableData.agent_all_amoney}}</text>元</text>
				</view>
			</view>
			<view class="wh-20"></view>
			<view class="w-600 h-1 w-bj-content"></view> -->

			<!-- <view class="invite_wrap_mask" @click="inviteShow=false" v-if="inviteShow"></view>
			<view class="invite_wrap" v-if="inviteShow">
				<view class="close" @click="inviteShow=false"><image src="/static/gane/jh.png" mode="aspectFill"></image></view>
				<view class="wh-50"></view>
				<view class="w-550 h-70 w-bk-conts1 w-relative w-row-align">
					<text class="font-28 w-wz-conts p-10 w-text-overflow">{{tableData.agent_url}}</text>
					<view class="w-absolute-right w-150 h-74 w-bj-conts w-row-center font-30"
						@click="copyLink(tableData.agent_url)">
						复制
					</view>
				</view>
				<view class="wh-50"></view>
				<image class="w-380 h-380 w-bor-25" :src="tableData.agent_code"></image>
				<view class="wh-100"></view>
			</view> -->


		</view>


		<uni-popup style="z-index: 999;" ref="save_popup" type="bottom">
			<view class=" w-bj-white saveBox">
				<view class="van-share-sheet__header">
					<h2 class="van-share-sheet__title">立即分享给好友</h2>
				</view>
				<view class="van-share-sheet__options">
					<view class="save-items" @click="selSaveItem('link')">
						<image src="/static/mine/link-icon.png" mode="widthFix"></image>
						<view class="">
							复制链接
						</view>
					</view>
					<view class="save-items" @click="selSaveItem('qrcode')">
						<image src="/static/mine/qrcode-icon.png" mode="widthFix"></image>
						<view class="">
							二维码
						</view>
					</view>
				</view>

				<button type="button" class="van-share-sheet__cancel" @click="closeSave()">取消</button>
			</view>
		</uni-popup>

		<uni-popup style="z-index: 999;" ref="qrcode_popup" type="center">
			<view class=" w-bj-white w-600  w-col-center w-bor-25">
				<image :src="tableData.agent_code" class="w-bor-25" style="width: 600rpx;height: 600rpx;"></image>

				<button type="button" class="van-share-sheet__cancel" @click="closeQRcodeSave()">取消</button>
			</view>
		</uni-popup>
	</view>



</template>

<script>
	import $H from '@/pages/common/request.js'
	export default {
		data() {
			return {
				inviteShow: false,
				show: false,
				UserInfo: {},
				tableData: {},

				grade: '一级',
				date: '今日',
				dateMore: false,
				page: 1,
				list: [],
				loadStatus: 'loadmore',
			}
		},

		onLoad() {

			this.UserInfo = uni.getStorageSync('UserInfo');
			if (this.UserInfo.uid && this.UserInfo.token) {
				this.getData()
				this.get_list()
			} else {
				return uni.reLaunch({
					url: '/pages/index/index'
				});
			}

		},

		onReachBottom() {
			this.get_list()
		},
		methods: {

			selSaveItem(type) {
				if (type == 'link') {
					this.copys(this.tableData.agent_url)
				} else {

					this.$refs.qrcode_popup.open()
				}
				this.$refs.save_popup.close()
			},

			closeQRcodeSave() {
				this.$refs.qrcode_popup.close()
			},

			saveOpen() {
				this.$refs.save_popup.open()
			},

			closeQRcodeSave() {
				this.$refs.qrcode_popup.close()
			},

			closeSave() {
				this.$refs.save_popup.close()
			},

			copys(data) {
				let url = data;
				let oInput = document.createElement('input');
				oInput.value = url;
				document.body.appendChild(oInput);
				oInput.select(); // 选择对象;
				document.execCommand("Copy"); // 执行浏览器复制命令
				// 复制成功提示;
				uni.showToast({
					title: '复制成功',
					icon: 'none',
				});
				oInput.remove()
			},

			submitForm() {
				if (Number(this.tableData.agent_money < 10)) {
					return uni.showToast({
						title: '转入金额必须大于10元',
						duration: 1000,
						icon: 'none'
					});
				}
				let then = this
				uni.showModal({
					title: '佣金操作',
					content: `本次转入 ￥${then.tableData.agent_money}元，到账户余额？`,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							$H.post('/app_user_agent_money').then((res) => {

								if (res.code == 200) {
									uni.showToast({
										title: res.msg,
										duration: 2000,
										icon: 'none'
									});
									then.getData()
								}
							})
						} else if (res.cancel) {

						}
					}
				});
			},

			getData() {
				$H.post('/app_user_agent', {
					domain: window.location.origin,
					grade: this.grade,
					date: this.date
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						this.tableData = res.data
						this.show = true
					} else {
						// uni.clearStorageSync()
						// uni.reLaunch({
						// 	url: '/pages/index/index'
						// });
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},

			list_change(val, type) {
				if (type == 'grade') {
					this.grade = val
				} else {
					this.date = val
					this.dateMore = false
				}
				this.page = 1
				this.list = []
				this.loadStatus = 'loadmore'
				this.getData()
				this.get_list()
			},
			get_list() {
				if (this.loadStatus != 'loadmore') return
				this.loadStatus = 'loading'
				uni.showLoading({})
				$H.post('/app_user_agent_log', {
					type: 'list',
					grade: this.grade,
					date: this.date,
					pagenum: this.page
				}).then((res) => {
					uni.hideLoading()
					console.log(res)
					if (res.code == 200) {
						if (this.page >= res.data.last_page) {
							this.loadStatus = 'nomore'
						} else {
							this.loadStatus = 'loadmore'
							this.page++;
						}
						this.list = this.list.concat(res.data.data);
						this.show = true
					} else {
						// uni.clearStorageSync()
						// uni.reLaunch({
						// 	url: '/pages/index/index'
						// });
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},

			// 
			// copyCode(value) {
			// 	uni.setClipboardData({
			// 		data: value, // 要复制的文字
			// 		success: function(res) {
			// 			uni.showToast({
			// 				title: '复制成功',
			// 				icon: 'none'
			// 			});
			// 		}
			// 	});
			// },

			// copyLink(value) {
			// 	uni.setClipboardData({
			// 		data: value, // 要复制的文字
			// 		success: function(res) {
			// 			uni.showToast({
			// 				title: '复制成功',
			// 				icon: 'none'
			// 			});
			// 		}
			// 	});
			// },
			// 


			copyLink(val) {
				this.copys(val); //调用copy方法;
			},

			copys(data) {
				let url = data;
				let oInput = document.createElement('input');
				oInput.value = url;
				document.body.appendChild(oInput);
				oInput.select(); // 选择对象;
				document.execCommand("Copy"); // 执行浏览器复制命令
				// 复制成功提示;
				uni.showToast({
					title: '复制成功',
					icon: 'none',
				});
				oInput.remove()
			},


			go_xiazhu(data) {
				uni.navigateTo({
					url: '/pages/my/order/order?user_uid=' + data.uid
				});
			},

			RouteIndex(path, type) {
				uni.navigateTo({
					url: `/pages/my/agent/${path}?type=${type}`
				});
			}


		}
	}
</script>
<style scoped lang="scss">
	body {
		color: #535d76 !important;
		background-color: #f0f3ff;
		font-size: 3.46667vw;
	}

	.title {
		.w-wz-conts {
			color: #323233 !important;
		}

	}

	.w-bj-cont {
		background-color: #fff !important;
		box-shadow: 0px 0px 40rpx -10rpx #e7e3e3;
	}

	.w-wz-conts {
		color: #323233 !important;
	}

	.w-wz-black8 {
		color: #323233 !important;
	}
</style>
<style lang="less">
	.top_wrap {
		color: #434343;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		border-bottom: 2rpx solid #434343;
		width: 100%;

		.item {
			flex: 1;
			padding: 40rpx 0;
			position: relative;

			&::before {
				content: ' ';
				width: 2rpx;
				height: 66rpx;
				background-color: #434343;
				position: absolute;
				top: 50rpx;
				left: 0;
				// border-right: 2rpx solid #434343;
			}

			&:nth-child(1)::before {
				width: 0;
			}

			.label {}

			.val {
				margin-top: 14rpx;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				font-size: 26rpx;

				.num {
					font-size: 36rpx;
					color: #ff0000;
					margin: 0 8rpx;
					line-height: 1;
				}
			}
		}
	}

	.date_bar {
		color: #323233;
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.item {
			flex: 1;
			padding: 10rpx 0;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			&.active {
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					margin-left: -35rpx;
					width: 70rpx;
					height: 4rpx;
					background-color: #3e5ccd;
				}
			}

			image {
				transform: rotate(-90deg);
				margin-left: 10rpx;
				position: relative;
				width: 26rpx;
				height: 26rpx;
			}
		}

		.more {
			position: absolute;
			top: 70rpx;
			right: 20rpx;
			width: 200rpx;
			background-color: #e4e4e4;
			border-radius: 20rpx;
			overflow: hidden;

			.item2 {
				padding: 16rpx 0;
				text-align: center;
			}

			.active2 {
				background-color: #3e5ccd;
				color: #fff;
			}
		}
	}

	.save-icon {
		width: 44rpx;
		margin-right: 6rpx;
	}

	.wh-130 {
		height: auto !important;
	}

	.saveBox {
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		margin: auto;

		.save-items {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 40rpx;

			&>image {
				width: 70rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.list {
		color: #323233 !important;
		width: 100%;
		margin-top: 30rpx;

		.item {
			margin: 0 20rpx 14rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #434343;
			padding-bottom: 14rpx;
			font-size: 26rpx;

			.box1 {
				width: 170rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.avatar {
					width: 50rpx;
					height: 50rpx;
				}

				.nickname {
					margin-top: 6rpx;
				}
			}

			.box2 {
				display: flex;

				.box2_item {
					text-align: center;
					margin: 0 10rpx;
          font-size: 22rpx;
					.label {
						margin-bottom: 10rpx;
					}
				}
			}

			.box3 {
				.btn {
					width: 120rpx;
					text-align: center;
					line-height: 50rpx;
					font-size: 24rpx;
					background-color: #ccb581;
					color: #000;
					border-radius: 12rpx;
				}
			}
		}

		.empty {
			text-align: center;
			padding: 60rpx;
			padding-bottom: 200rpx;
		}
	}

	.invite_wrap_mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	.invite_wrap {
		position: fixed;
		top: 20vh;
		background-color: #272727;
		border-radius: 14rpx;
		text-align: center;
		padding: 28rpx;
		border: 8rpx solid #ccb581;
		z-index: 9;

		.close {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			border: 4rpx solid #ccb581;
			color: #ccb581;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			line-height: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #272727;

			image {
				width: 60rpx;
				height: 60rpx;
				transform: rotate(45deg);
			}
		}
	}
</style>